---
title: 'Curated List of Browser Extension I Personally Use'
publishedAt: '2021-04-24'
description: 'These great extensions helped me a lot during development, especially number 1 and 5. I encourage you to try it.'
banner: 'alejandro-barba-4NrCrpwzyMw-unsplash_hj1z2g'
tags: 'tools'
---

## Introduction

> Finding these add-ons really boosts my time on developing a website, debugging, and learning

Disclaimer: I personally use Firefox Developer Edition for my default browser. Some of extension probably have the chrome version, but you really should try Firefox Dev Edition.

## Why Firefox Developer Edition?

[Get Firefox Developer Edition](<(https://www.mozilla.org/en-US/firefox/developer/)>)

### 1. Better Grid & Flexbox Tools

Firefox has better dev tools especially for grid and flexbox.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/ff-1_nd3fc8.png'
  alt='Grid Tools'
  width={1440}
  height={714}
/>

### 2. Better Color Scheme

Also, the overall code theme for the Firefox Dev tools is absolutely better than the orange-y chrome for me. It resembles [Dracula](https://draculatheme.com/) color theme which I also use on my VSCode.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/ff-2_wpx1cw.png'
  alt='Color Scheme'
  width={1440}
  height={489}
/>

Also, you got a custom font tabs, you can directly customize it with a slider, how convenient.

### 3. Mobile View without Opening Devtools

You want to open mobile view, without blocking half the view? You can.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/ff-3_tvikoi.png'
  alt='Mobile View'
  width={1440}
  height={880}
/>

### 4. Lots of Development Tools (eyedropper especially)

Task manager and Eyedropper is really great, the rest is the usual like Chrome too. But it has a dedicated icon on the toolbar, so it is really handy.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/ff-4_agrjkt.png'
  alt='Eye dropper'
  width={321}
  height={382}
/>

> [Check out the official firefox website](https://www.mozilla.org/en-US/firefox/developer/) to see more features.

## List of ~~Extension~~ Add-ons That I Use

### 1. CSS Debug

[Download Link](https://addons.mozilla.org/en-US/firefox/addon/pranay-joshi/)

This add-on has a really great feature for giving a global outline for each HTML element. This tool helped me a lot during debugging CSS. Really recommended, I even map my mouse button to toggle this tool easily.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/css-debug_u7pcb0.png'
  alt='CSS Debug'
  width={1440}
  height={764}
/>

### 2. WhatFont

[Download Link](https://addons.mozilla.org/en-US/firefox/addon/zjm-whatfont/)

A great tool to peek what font is under the hood. Fairly easy to use, just click it and you get the font. I usually use this to check the font-size and if I am curious what font is being used on other website.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/whatfont_qkg97o.png'
  alt='What Font'
  width={1440}
  height={764}
/>

### 3. Wappalyzer

[Download Link](https://addons.mozilla.org/en-US/firefox/addon/wappalyzer/)

This add-on is really great if you are curious what technology is being used in a website.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/wappalyzer_ttsbiv.png'
  alt='Wappalyzer'
  width={1070}
  height={563}
/>

### 4. Measure-it

[Download Link](https://addons.mozilla.org/en-US/firefox/addon/measure-it/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search)

Measuring pixel size is really useful when we are making a website, this is a great one.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/measure-it_wr16gb.png'
  alt='Measure It'
  width={1440}
  height={764}
/>

### 5. VisBug

[Download Link](https://addons.mozilla.org/en-US/firefox/addon/visbug/)

I recently found this, and I think it is my best find yet. It has a lot of great tools like changing padding, margins, font size. You can move the flexbox arrangement, change your text, all with one tool. This is really great when you want to fine-tune your website design after building it.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/visbug_ehrnfs.fig'
  alt='Measure It'
  width={656}
  height={410}
/>

## Summary

Be sure to download all of those add-ons! Add-ons help a lot when developing a website. Find something that you like and comfortable with, and utilize it.
